<template>
	<div>
		<div class="box">
			<div class="collapse">
				<div
					class="title"
					v-if="showTitle"
					@click="changeStatus"
					:class="{ 'title-boder': showBorder }">
					<div class="title-slot">
						<slot name="title">
							<div class="title-default">{{ title }}</div>
						</slot>
					</div>
					<div class="title-icon">
						<div
							class="icon"
							:class="[
								openCollapse ? 'icon-open' : 'icon-close',
							]">
							<uni-icons type="right"></uni-icons>
						</div>
					</div>
				</div>
				<div class="content">
					<slot name="content"></slot>
				</div>
				<div
					class="contenter"
					:class="[
						openCollapse ? 'contenter-open' : 'contenter-close',
					]">
					<div class="contenter-default">
						<div class="contenter-slot">
							<slot></slot>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ACollapse',
		components: {},
		props: {
			value: {
				required: false,
			},
			title: {
				required: false,
				type: String,
			},
			showTitle: {
				required: false,
				type: Boolean,
				default: true,
			},
			showBorder: {
				required: false,
				type: Boolean,
				default: true,
			},
			open: {
				required: false,
				type: Boolean,
			},
		},
		data() {
			return {
				status: true,
			};
		},
		computed: {
			openCollapse: {
				get() {
					return this.value ?? this.status;
				},
				set(val) {
					if (typeof this.value == 'boolean') {
						this.$emit('input', val);
					} else {
						this.status = val;
					}
				},
			},
		},
		created() {
			if (this.open !== undefined) {
				this.openCollapse = this.open;
			}
		},

		mounted() {},
		methods: {
			changeStatus(status) {
				let state = undefined;
				if (status === true || status === false) {
					state = status;
				}
				this.openCollapse = state ?? !this.openCollapse;
				this.$emit('change', this.openCollapse);
			},
			openStatus() {
				this.openCollapse = true;
			},
			closeStatus() {
				this.openCollapse = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;
		background-color: #fff;
	}
	.collapse {
		.title {
			width: 100%;
			min-height: 80rpx;
			// height: 70rpx;
			// padding: 0 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			.title-slot {
				flex: 1;
				min-width: 0;
				margin-right: 12px;
				.title-default {
					font-weight: 600;
				}
			}
			.title-icon {
				display: flex;
				align-items: center;
				.icon {
					transition: all 0.35s;
				}
				.icon-open {
					transform: rotate(90deg);
				}
				.icon-close {
					transform: rotate(0);
				}
			}
		}
		.title-boder {
			border-bottom: 1px solid #ebeef5;
		}
		.contenter {
			width: 100%;
			display: grid;
			transition: all 0.35s;
			overflow-y: hidden;
			.contenter-default {
				min-height: 0;
				// width: 100%;
				overflow-x: auto;
				.contenter-slot {
					// padding: 0 15rpx;
					// box-sizing: border-box;
					width: 100%;
					// padding: 15rpx 0;
				}
			}
		}
		.contenter-open {
			grid-template-rows: 1fr;
		}
		.contenter-close {
			grid-template-rows: 0fr;
		}
	}
</style>
